<template>
  <div >
      <canvas style="z-index: 1000"
              ref="canvas"
              @mousemove="handleMouseMove"
              @mousedown="startDarw"
              @mouseup="stopDarw"
              :width="canvasWidth"
              :height="canvasHeight">
      </canvas>
      <canvas
          style="z-index: 100"
          ref="canvasBackground"
          :width="canvasWidth"
          :height="canvasHeight">
      </canvas>
  </div>
</template>

<script>

export default {
  props: {
    nowPonsint:Object,//当前点的坐标
    juxing:Object, //矩形点集合
    vertices:Array,  //多边形的点集合
    lines:Array,//线的点集合
    darwType:Number,// 1、矩形，2、不规则形状，3、折线图
    videoFrameBase64: {
      type: String,
      required: true
    },
    canvasWidth: {
      type: Number,
      default: 640
    },
    canvasHeight: {
      type: Number,
      default: 480
    },
    selectType:Function
  },
  data() {
    return {
      isZaiHuaJuXing:false,//是否正在画
      index:0,//记录多边形的有多个顶点
    };
  },

  methods: {

    //坐标位置监听
    handleMouseMove(event) {
      const canvas = this.$refs.canvas;
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      // 使用x和y作为鼠标在canvas内的位置
      this.nowPonsint.x=x;
      this.nowPonsint.y=y;

      if(this.isZaiHuaJuXing==true){
        if(this.darwType==1){
          this.clearCanvas();
          this.juxing.x2=x;
          this.juxing.y2=y;
          this.drawRectangle(this.juxing.x1,this.juxing.y1, this.juxing.x2,this.juxing.y2)
        }
        if(this.darwType==2){
          // this.clearCanvas();
          // this.vertices[index]={x:this.nowPonsint.x,y:this.nowPonsint.y}
          // this.drawPolygon(this.vertices)
        }
        if(this.darwType==3){
          console.log("***********************husaa")
            this.clearCanvas()
            if(this.lines.length>1){
              for (let i = 0; i < this.lines.length-1; i++) {
                this.drawLineChart(this.lines[i].x,this.lines[i].y,this.lines[i+1].x,this.lines[i+1].y)
              }
            }
            this.drawLineChart(this.lines[this.lines.length-1].x,this.lines[this.lines.length-1].y,this.nowPonsint.x,this.nowPonsint.y)
        }
      }
    },
    //画矩形
    drawRectangle(x1,y1,x2,y2) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = '#ff0000';
      // 在canvas上画矩形
      ctx.beginPath();
      ctx.rect(x1, y1, x2-x1, y2-y1); // 设置矩形的位置和大小
      ctx.stroke(); // 绘制矩形边框

    },
    //清除画布
    clearCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    //开始画
    startDarw(event){
      if(this.darwType==1){
        //清除画布
        this.isZaiHuaJuXing=true;
        this.juxing.x1=this.nowPonsint.x;
        this.juxing.y1=this.nowPonsint.y;
        this.juxing.x2=this.nowPonsint.x;
        this.juxing.y2=this.nowPonsint.y;
        this.drawRectangle(this.juxing.x1,this.juxing.y1, this.juxing.x2,this.juxing.y2)
      }
      if(this.darwType==2){
        if(event.button==0){
          this.isZaiHuaJuXing=true
          this.vertices.push({x:this.nowPonsint.x,y:this.nowPonsint.y})
          this.index=this.index+1
          console.log(this.vertices)
          this.drawPolygon(this.vertices)
        }
        else  if(event.button==2) {
          this.clearCanvas()
          this.vertices.pop()
          this.drawPolygon(this.vertices)
        }
      }
      if(this.darwType==3){
        console.log(event.button)

        if(event.button==0){
          this.isZaiHuaJuXing=true
          this.lines.push({x:this.nowPonsint.x,y:this.nowPonsint.y})
          if(this.lines.length>1){
            for (let i = 0; i < this.lines.length-1; i++) {
              this.drawLineChart(this.lines[i].x,this.lines[i].y,this.lines[i+1].x,this.lines[i+1].y)
            }
          }
        }
        if(event.button==2){
          this.isZaiHuaJuXing=false
          this.clearCanvas()
          if(this.lines.length>1){
            for (let i = 0; i < this.lines.length-1; i++) {
              this.drawLineChart(this.lines[i].x,this.lines[i].y,this.lines[i+1].x,this.lines[i+1].y)
            }
          }
        }
      }
    },
    //结束画
    stopDarw(){
      if(this.darwType==1||this.darwType==3){
        this.isZaiHuaJuXing=false;
      }
    },
    //画多边形
    drawPolygon(vertices) {
      this.clearCanvas()
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(vertices[0].x, vertices[0].y);
      for (let i = 1; i < vertices.length; i++) {
        ctx.lineTo(vertices[i].x, vertices[i].y);
      }
      ctx.closePath();
      ctx.strokeStyle = '#ff0000';
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.fill();
    },
    //画线
    drawLineChart(x1,y1,x2,y2) {
      console.log("**********开始画线")
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');

      // 设置线条样式
      ctx.strokeStyle = '#ff0000'; // 红色线条
      ctx.lineWidth = 5; // 线条宽度

      // 绘制直线
      ctx.beginPath();
      ctx.moveTo(x1, y1); // 起点坐标 (x, y)
      ctx.lineTo(x2, y2); // 终点坐标 (x, y)
      ctx.stroke(); // 进行绘制
    },

    initBackgroundCanvas() {
      const backgroundCanvas = this.$refs.canvasBackground;
      const ctx = backgroundCanvas.getContext('2d');
      // 绘制背景图
      const img = new Image();
      img.src = this.videoFrameBase64;
      img.onload = () => {
        ctx.drawImage(img, 0, 0, backgroundCanvas.width, backgroundCanvas.height);
      };
    },
  },
  mounted() {
    this.initBackgroundCanvas();
  }
};
</script>

<style scoped>
canvas {

  position: absolute;
  top: 0;
  left: 0;
}
</style>
